<template id="payForOther">

  <div class="payForOther">
    <!--缴费地区选择-->
    <div class="region row bg_ff" @click="showCityList">
      <span class="col_333">缴费地区</span>
      <span class="cityName">{{initCity.cityName}}</span>
      <i class="icon iconfont icon-shangyiye-copy"></i>
    </div>
    <!--缴费项目列表-->
    <div class="row paySignListBox" v-show="isCity" v-for="item in paySignData" :key="item.corpId">
      <div class="col paySignList">
        <router-link :to="{path:'/pay/addPay', query: {id: item.corpId, cityName: item.corpName}}">
          <img class="border-radious-img"  :src="item.logoFile" v-if="item.logoFile">
          <img class="border-radious-img"  src="../../../static/image/pay_sign.png" v-else="">
          <span class="col_333">{{item.corpName}}</span>
        </router-link>
      </div>
    </div>
    <!--城市列表-->
    <div class="citys bg_f3" v-show="isShowCitys">
      <ul class="city-list">
        <li class="city-item">地区选择</li>
        <li class="city-item" v-for="city in citys" :key="city.cityCode" @click="showCity(city)">{{city.cityName}}</li>
      </ul>
    </div>
  </div>
</template>

<script>

  export default {
    data () {
      return {

        initCity: {
          cityName: '',
          id:''
        },
        isShowCitys:false,
        isCity:true,
        paySignData:[],
        citys:[]
      }
    },
    methods: {
      showCityList:function () {
        this.isShowCitys = true;
        this.isCity = false;

      },
      showCity:function (city) {
        var that = this;
        this.initCity = {
          cityName: city.cityName,
          id: city.cityCode
        };
        this.isShowCitys = false;
        this.isCity = true;
        this.$post(this.$urlAll.query_fee_unit, {cityId: this.initCity.id}).then(function (response) {
          that.paySignData = response.t.merchantList;
        })
      }
    },
    //获取后台数据，dom渲染之前
    created: function(){
      var that = this;

      //查询城市--添加缴费项目
      this.$post(this.$urlAll.query_city).then(function (response) {
        that.citys = response.t.paymentCityList;
        that.initCity = {
          cityName: response.t.paymentCityList[0].cityName,
          id: response.t.paymentCityList[0].cityCode
        };

        //查询指定城市的缴费单位
        that.$post(that.$urlAll.query_fee_unit, {cityId: that.initCity.id}).then(function (response) {
          that.paySignData = response.t.merchantList;
        })
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  .region{
    height: 0.44rem;
    margin-bottom: 0.1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
    position: relative;
  }
  .region>span:first-child{
    font-size: 0.16rem;
  }
  .region>span.cityName{
    position: absolute;
    right: 0.4rem;
    color: #666666;
    line-height: 0.44rem;
  }
  .region .icon-shangyiye-copy{
    font-size: 0.3rem;
    color: #c9c9c9;
  }
  .paySignListBox{
    width:calc(100% - 0.2rem);
    margin: 0 auto 0.15rem;
  }
  .paySignList{
    background-color: #ffffff;
    height: 0.62rem;
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-left: 0.1rem;
    position: relative;

  }
  .paySignList a{
    display: inline-block;
    height: 100%;
    width: 100%;

  }
  .paySignList img{
    width: 0.4rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0.62rem;
    /*padding-right: 0.1rem;*/
  }
  .paySignList a span{
    font-size: 0.15rem;
    padding-left: 0.1rem;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .citys{
    position: absolute;
    width:100%;
    top:0;
  }
  .citys .city-list{}
  .citys .city-item{
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #333333;
    font-size: 0.15rem;
    margin-bottom: 0.01rem;
    background: #ffffff;
    padding-left: 0.1rem;
  }
  .citys .city-item:first-child{
    font-size: 0.14rem;
    color: #666666;
    background: #f3f3f3;
  }
</style>
